/***********************************************
 * MIT License
 *
 * Copyright (c) 2016 珠峰课堂,Ramroll
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */


import React, {Component} from 'react'

import {View, Text, TouchableWithoutFeedback} from 'react-native'

class SegmentedControlAndroid  extends Component{
  
  static defaultProps = {
    tintColor : '#007aff'
  }

  constructor(props){
    super()
    this.state = {
      selectedIndex : props.selectedIndex
    }

  }
  
  _change(i){
    
    return () => {
      
      if(this.state.selectedIndex != i) {

        this.setState({
          selectedIndex : i
        }, (() => {
          
          this.props.onChange({nativeEvent : {selectedSegmentIndex : i}})
        }).bind(this))
      }
    }
    
  }
  render(){
    const {values, tintColor} = this.props
    const {selectedIndex} = this.state
    return <View style={{flexDirection : 'row'}}>
      {values.map((value, i) => {

        const color = (i === selectedIndex) ? tintColor : "#ccc"
        return <TouchableWithoutFeedback onPress={this._change(i).bind(this)} key={i} style={{flex : 1}}>
          <View style={{
           ...styles.itemStyle, borderLeftWidth : i == 0 || (i === selectedIndex) ? 1 : 0,
           borderRightWidth : i === (selectedIndex - 1) ? 0 : 1,
           borderColor : tintColor,
           backgroundColor : (i === selectedIndex)  ? tintColor : "white"
           }}>
            <Text style={{color : (i === selectedIndex) ? "white" : tintColor}}>{value}</Text>
          </View>
        </TouchableWithoutFeedback>
      })}
    </View>
  }
  
}


const styles = {
  itemStyle : {
    borderWidth : 1,
    paddingLeft : 20,
    paddingRight : 20,
    paddingTop : 3,
    paddingBottom : 3
  }
}



module.exports = SegmentedControlAndroid

